import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import { Layout, Menu, Row, Col, Button } from "antd";
import MyNavLink from "./compoents/MyNavLink";
import Test from "./compoents/Testlzp";
import doctorList from './compoents/cyh/doctorList/doctorList'
import doctorAdd from './compoents/cyh/doctorAdd/doctorAdd'
import "antd/dist/antd.css";
import "./App.css";
import {
  PieChartOutlined,
  UserOutlined,
  IdcardOutlined,
  DollarOutlined,
  FileSearchOutlined,
  MedicineBoxOutlined,
  ExpandOutlined,
  ExperimentOutlined,
  MailOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeOutlined,
  PoweroffOutlined,
} from "@ant-design/icons";
// import ReduxTest from './compoents/test/reduxTest'

const { Content, Sider } = Layout;
const { SubMenu } = Menu;

class App extends Component {
  state = {
    collapsed: false,
    theme: "dark",
    current: "1",
  };

  onCollapse = (collapsed) => {
    // console.log(collapsed);
    this.setState({ collapsed });
  };
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };
  handleClick = (e) => {
    // console.log("click ", e);
    this.setState({
      current: e.key,
    });
  };
  render() {
    const { collapsed } = this.state;
    return (
      <div>
        {/* <ReduxTest />
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> */}
        <Layout style={{ minHeight: "100vh" }}>
          <Sider
            theme={this.state.theme}
            collapsible
            collapsed={collapsed}
            onCollapse={this.onCollapse}
          >
            {/* <div className="logo">
          </div> */}
            <Menu
              theme={this.state.theme}
              onClick={this.handleClick}
              defaultSelectedKeys={["1"]}
              mode="inline"
            >
              <Menu.Item key="1" icon={<PieChartOutlined />}>
                数据视图
              </Menu.Item>
              <SubMenu key="sub1" icon={<MedicineBoxOutlined />} title="问诊管理">
                <Menu.Item key="2">在线复诊</Menu.Item>
                <Menu.Item key="3">续方购药</Menu.Item>
              </SubMenu>
              <Menu.Item key="4" icon={<FileSearchOutlined />}>
                药品订单管理
              </Menu.Item>
              <SubMenu key="sub2" icon={<IdcardOutlined />} title="医生管理">
                <Menu.Item key="5">
                  <MyNavLink to="/doctorList" className='nav_link'>医生列表</MyNavLink>
                </Menu.Item>
                <Menu.Item key="6">
                  <MyNavLink to="/doctorAdd" className='nav_link'>新增医生</MyNavLink>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub3" icon={<DollarOutlined />} title="财务管理">
                <Menu.Item key="7">问诊订单</Menu.Item>
                <Menu.Item key="8">处方订单</Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<ExpandOutlined />} title="运营管理">
                <Menu.Item key="9">评价</Menu.Item>
                <Menu.Item key="10">热门医生</Menu.Item>
                <Menu.Item key="11">公告</Menu.Item>
              </SubMenu>
              <Menu.Item key="12" icon={<UserOutlined />}>
                就诊人管理
              </Menu.Item>
              <SubMenu key="sub5" icon={<ExperimentOutlined />} title="药品管理">
                <Menu.Item key="13">药品查询</Menu.Item>
                <Menu.Item key="14">新增药品</Menu.Item>
              </SubMenu>
              <SubMenu key="sub6" icon={<MailOutlined />} title="药房管理">
                <Menu.Item key="22">
                  <MyNavLink to="/test" className='nav_link'>测试</MyNavLink>
                </Menu.Item>
                <Menu.Item key="23">院内药房</Menu.Item>
                <Menu.Item key="24">药品挂靠</Menu.Item>
              </SubMenu>
              <SubMenu key="sub7" icon={<MailOutlined />} title="系统管理">
                <Menu.Item key="15">角色及权限</Menu.Item>
                <Menu.Item key="16">人员管理</Menu.Item>
                <Menu.Item key="17">疾病管理</Menu.Item>
                <Menu.Item key="18">科室管理</Menu.Item>
                <Menu.Item key="19">短信模板</Menu.Item>
                <Menu.Item key="20">消息模板</Menu.Item>
                <Menu.Item key="21">日志</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout className="site-layout right">
            <div className="content_header">
              <Row>
                <Col span={6}>
                  <Row>
                    <Col span={4}></Col>
                    <Col span={10}>
                      <Button
                        onClick={this.toggleCollapsed}
                        style={{ marginBottom: 16 }}
                      >
                        {React.createElement(
                          this.state.collapsed
                            ? MenuUnfoldOutlined
                            : MenuFoldOutlined
                        )}
                      </Button>
                    </Col>
                    <Col span={10}>
                      <Switch
                        checked={this.state.theme === "dark"}
                        onChange={this.changeTheme}
                        checkedChildren="Dark"
                        unCheckedChildren="Light"
                      />
                    </Col>
                  </Row>
                </Col>
                <Col span={12}></Col>
                <Col span={6}>
                  <Row>
                    <Col className="nav_hover" span={2}>
                      <UserOutlined />
                    </Col>
                    <Col className="nav_hover" span={8}>
                      momo.xyz
                    </Col>
                    <Col className="nav_hover" span={4}>
                      <HomeOutlined />
                    </Col>
                    <Col className="nav_hover" span={4}>
                      <PoweroffOutlined />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
            <Content className="content" style={{ margin: "16px" }}>
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                {/* 此处为跳转路由 */}
                <Switch>
                  <Route path="/test" component={Test}></Route>
                  <Route path="/doctorList" component={doctorList}></Route>
                  <Route path="/doctorAdd" component={doctorAdd}></Route>
                </Switch>

              </div>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
export default App;
